<template>
    <div class='goods-relevant'>
        <div class="header">
            <i class="icon"></i>
            <span class="title">{{ goodsId ? '同类商品推荐' : '猜你喜欢' }}</span>
        </div>
        <XtxCarousel/>
    </div>
</template>

<script>
import { ref } from 'vue'
import { findRelGoods } from '@/api/goods';

const useRelGoodsData = async (id) => {
    const sliders = ref([])
    // 每页4条
    const size = 4
    const {data:{result}} = await findRelGoods(id)
    // 将数据根据size进行分页
    const total = Math.ceil(result.length / size)
    for(let i = 0;i < total;i++) {
        sliders.value.push(result.slice(i * size, (i + 1) * size))
    }

    return sliders
}
export default {
  // 相关推荐
    name: 'GoodsRelevant',
    props:{
        goodsId:{
            type: String,
            default: undefined
        }
    },
    setup(props) {
        const sliders = useRelGoodsData(props.goodsId)
        return { sliders }
    }
}
</script>

<style scoped lang='less'>
.goods-relevant {
    background: #fff;
    min-height: 460px;
    margin-top: 20px;
    .header {
        height: 80px;
        line-height: 80px;
        padding: 0 20px;
        .title {
            font-size: 20px;
            padding-left: 10px;
        }
        .icon {
            width: 16px;
            height: 16px;
            display: inline-block;
            border-top: 4px solid @xtxColor;
            border-right: 4px solid @xtxColor;
            box-sizing: border-box;
            position: relative;
            transform: rotate(45deg);
            &::before {
                content: "";
                width: 10px;
                height: 10px;
                position: absolute;
                left: 0;
                top: 2px;
                background: lighten(@xtxColor, 40%);
            }
        }
    }
}
// 使用:deep()深度选择器后，scoped的样式可以进一步渲染子组件
:deep(.xtx-carousel) {
  height: 380px;
  .carousel {
    &-indicator {
      bottom: 30px;
      span {
        &.active {
          background: @xtxColor;
        }
      }
    }
    &-btn {
      top: 110px;
      opacity: 1;
      background: rgba(0,0,0,0);
      color: #ddd;
      i {
        font-size: 30px;
      }
    }
  }
}
</style>